<template>
  <div class="browseRecord">
     <div class="calendar"> 
         <div class="main">
            <div class="calendar-wrap" :class='fullToggle?"full-calendar":""'>
                <canlen></canlen>

            </div>
            <div class="order-record-wrap">
                <div v-if="appointment" class="record gray">
                    <div class="record-history">
                        <div class="record-list">
                            <ul>
                                <li>

                                </li>
                            </ul>
                        </div>
                    </div>
               
                </div>
                
            </div>
        </div>
      
     </div>
    
    
      
      <div class="all">
        <div class="time">3月22日</div>
          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

         

         
      </div>

       <div class="all">
        <div class="time">3月22日</div>
          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 
      </div>

       <div class="all">
        <div class="time">3月22日</div>
          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 

          <div class="part1">
            <div class="part1Top">
              <img src="../assets/gzyimages/shoes.jpg" alt="">
              <span>每满200减20</span>
            </div>
            <div class="price">￥299.0</div>
       
          </div> 
      </div>
  </div>

</template>
<style scoped lang="less">
@import '../assets/gzyimages/m_base.less';
.browseRecord{
  .calendar{
    .main{
       height: 110px;
      background: #efefef;
      .calendar-wrap{
      position: absolute;
      left: 0;
      top:0;
      width: 100%;
      height: 1.1rem;
      
      &.full-calendar{
        //   height: 2.62rem;
      }
    .order-record-wrap{
    position: absolute;
    left: 0;
    top:1.1rem;
    height: calc(100% - 1.1rem);
    width: 100%;
    overflow:auto;
    .record{
      position: relative;
      width: 100%;
      background-size: cover; 
      &.gray{
         background: #F7F7F9;
      }
      .record-history{
         .record-list{
             ul li{

             }
         } 
      }

    }
  }
  }
    }
  }
 .all{
  //  height: 800px;
   background: #F7F7F7;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
 
   .time{
      font-size: 16px;
      
        margin-left: 20px;
        width: 100vw;
        height: 30px;
        line-height: 30px;
   }
   .part1{
   
   padding-bottom:56px ;
    width: 100px;
    height: 170px;
    
   
    .part1Top{
     
        position: relative;
        width: 100px;
        height: 144px;
        background: #F1F1F1;
      
       
      img{
        width: 100px;
        height: 120px;
         border: 1px solid #f1f1f1;
          border-radius: 8px;
         
      }
      span{
          position: absolute;
          width: 80px;
          height: 20px;
          border-radius: 10px;
          border: 1px solid #FE761A;
          color: #FF6600;
        bottom: 0;
        left: 0;
        text-align: center;
        line-height: 20px;
      }
    }
    .price{
      background: #fff;
     height: 20px;
     width: 60px;
     padding-left: 4px;
     padding-top: 5px;
     color: #FF3384;
     text-align: center;
    }
  }
 }
  
}
    
</style>

<script>
import canlen from './calendar'
export default {
    name:'browseRecord',
    components: {
      canlen
    },
    mounted() {

    },
    data () {
      return {
        // logoImg: logo,
        fullToggle:false,
        appointment:true
      }
    },
    created () {
  

    },
    methods: {
        linkToRecord(){
            this.$router.push("/addRecord");
        },

    }
}
</script>